import { getDetail } from "@/api/detail";
import { useRoute } from "vue-router";
import { onMounted,ref,computed } from "vue";

import type { IProduct } from "@/api/home";

export function useDetail(){
    // 通过useRoute获取当前的路由信息对象,this.$route
    const route = useRoute();
    const proid = route.params.id as string

    // 详情数据
    //Partial将IProduct类型的所有属性设置为可选
    const data = ref<Partial<IProduct>>({})
    const banners = computed(()=>{
        // return data.value.banners?.[0].split(",");
        if(data.value.banners){
            return data.value.banners[0].split(",");
        }else{
            return [];
        }
    })


    // 请求数据的方式
    const fetchData = async ()=>{
      const response =  await getDetail(proid);
    //   console.log(response.data)
    data.value = response.data;
    }

    onMounted(()=>{
        fetchData();
    })

    return {
        proid,
        data,
        banners,
    }
}